<body>

    <ul>

        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script>
        
        var allLis = document.querySelectorAll('ul li')
        // for(let i = 0,ilen = allLis.length; i < ilen; i++){//ES6 let ?兼容性
        for(var i = 0,ilen = allLis.length; i < ilen; i++){
           (function(i){
                allLis[i].addEventListener('click',function(){
                console.log(i + 1)//0开始，加1
            },false)//事件冒泡
            })(i)
        }
    </script>

    <style type="text/css">
        .btn{
            width: 100px;
            height: 30px;
            color: #FFF;
            font-size: 1.2em;
            text-align: center;
            line-height: 30px;
            background-color: black;
            top:50%;
            left: 50%;
            margin-top: -15px;
            margin-left: -50px;
            position: absolute;
        }
        .btn::after{
            width: 20px;
            height: 20px;
            text-align: center;
            color: red;
            font-size: 2px;
            content: "伪元素";        
            right: -10px;
            top: 5px;
            position: absolute;
            display: block; 
            background: #FFF;
            border-radius: 20px;
        }
    </style>
    <!-- css伪元素实现矩形按钮的右边缘中间有一个往里凹陷的小半圆 -->
    <buton class="btn">button</buton>
</body>

